<!doctype html>
<html class="no-js fixed-layout">
<head>
  <!-- 公共head Begin -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="keywords" content="萌宠之家-C2B2C社会化电商平台" />
  <meta name="description" content="《萌宠之家-C2B2C社会化电商平台》是一个基于宠物社区的一站式电商平台。" />
  <!-- minimum-scale=1.0, maximum-scale=1.0 不加这两个在iPhone浏览器下点击缩小了的输入框会使整个页面变大 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
  <title>萌宠之家-C2B2C社会化电商平台</title>

  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit">

  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp"/>

  <link rel="icon" type="image/png" href="statics/img/favicon.png">

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="icon" sizes="192x192" href="statics/img/app-icon72x72@2x.png">

  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Pet Mall"/>
  <link rel="apple-touch-icon-precomposed" href="statics/img/app-icon72x72@2x.png">

  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="statics/img/app-icon72x72@2x.png">
  <meta name="msapplication-TileColor" content="#0e90d2">

  <link rel="stylesheet" href="statics/AmazeUI/assets/css/amazeui.min.css">
  <link rel="stylesheet" href="statics/AmazeUI/assets/css/shop.css">

  <!--[if (gte IE 9)|!(IE)]><!-->
  <script src="statics/AmazeUI/assets/js/jquery.min.js"></script>
  <!--<![endif]-->

  <script src="statics/js/plugin/jquery.cookie.js"></script>

  <!-- 此处form的导入和amazeui.min.js会有冲突，请根据需要使用 -->
  <script src="statics/js/plugin/jquery.form.js"></script>

  <script src="statics/js/jquery.lSelect.js"></script>
  <script src="statics/js/plugin/jquery.metadata.js"></script>
  <script src="statics/js/product.js"></script>
  <!-- 公共head End -->
</head>
<body>
<!-- 网页头部 Begin -->
<div class="header"></div>
<!-- 网页头部 End -->
<div class="am-cf shop-main">
  <!-- content start -->
  <div class="shop-content">
    <div class="shop-content-body">
      <div class="am-g">
        <div class="am-u-sm-12 am-u-md-12">
          <div class="am-g am-margin-vertical-xs">
            <div class="am-u-sm-12 am-u-md-7">
              <ol class="am-breadcrumb am-margin-bottom-0" id="olCategoryPath">
                <li><a href="index.html"><span class="am-icon-home"> </span>首页</a></li>
              </ol>
            </div>
          </div>
          
          <div class="am-panel am-panel-default">
            <div class="am-panel-hd">
            <div class="am-g am-text-middle">
              <div class="am-u-sm-6 am-u-md-5 am-u-lg-3">
                <div class="am-btn-group" data-am-button>
                  <label class="am-btn am-btn-default am-btn-xs">
                    <input type="radio" checked><span class="am-icon-th am-icon-fw"> </span>&nbsp;萌宠列表
                  </label>
                </div>
              </div>
              <div class="am-u-sm-12 am-u-md-12 am-hide-lg-only am-margin-xs"></div>
              </div>
            </div>
            <div class="am-panel-bd">
              <ul id="ulProductList" class="am-avg-sm-2 am-avg-md-3 am-avg-lg-4 am-thumbnails">
              </ul>
              <h3 id="tips" style="display: none;" class="am-text-xs am-text-center am-text-danger">没有找到更多萌宠!</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- content end -->
</div>
</body>
<script src="statics/AmazeUI/assets/js/amazeui.min.js"></script>
<script src="statics/AmazeUI/assets/js/amazeui.modal.js"></script>
<script src="statics/js/base.js"></script>
<script src="statics/AmazeUI/assets/js/validator.js"></script>
<script type="text/javascript">

    // 商品分类列表
    let categoryList = new Array();

    // 查询关键字
    let keyword = GetQueryString('k');

    // 商品分类id
    let categoryId = GetQueryString('cid');

    // 商品分类父id
    let parentCategoryId = GetQueryString('pcid');

    // 查询条件对象
    let queryObject = new Object();
    queryObject.categoryIds = '';
    queryObject.statusList = '6';
    queryObject.pageSize = 60;
    queryObject.currentPage=1;

    // 分页对象
    let pageResult = new Object();

    $(function(){

        // 加载公共顶部模板
        $('.header').load('header.html');

        // 滚动条‘滚动至底部’的事件
        $('.shop-content').on('scroll', shopContentScroll );

        // 加载'商品分类'列表
        loadCategoryList();

        // 加载'商品'列表数据
        loadProductList();

    });// $(function());

/**	加载'商品'列表数据 **/
function loadProductList() {

    // 如果存在查询关键字，就赋值给查询对象
    if( keyword )
        queryObject.productName = keyword;

    // 加载'商品列表'数据
    $.post('http://localhost:8080/product/search', queryObject, function (result) {

        // 如果返回的是token失效，就重新登录
        if(result.code == 419) {

            Modal.confirm('当前会话token失效，请重新登录页面！', {
                closeViaDimmer: false,
                onConfirm: function() {
                    top.location.href = 'admin_login.html';
                },
                onCancel: function() {
                    top.location.href = 'admin_login.html';
                }
            });// Modal.confirm();

            return;
        }// if(result.code == 419);

        // 如果返回的数据的响应码不是'成功(200)'
        if(result.code != 200) {
            Modal.alert(result.msg);
            return;
        }

        // 如果返回的数据响应码为200
        // 就进行表格数据填充
        pageResult = result.data;
        queryObject.currentPage = pageResult.pageNum + 1;

        productList = pageResult.list;

        // 填充表格数据
        fillProductList();

        // 重新注册‘内容列表区域’滚动事件
        $('.shop-content').on('scroll', shopContentScroll );

    });// $.post();

}// loadProductList();

/** 填充表格数据 **/
function fillProductList( ) {

    // 隐藏显示提示
    $('#tips').hide();

    // 如果没有集合数据，就直接返回
    if( !productList || productList.length == 0 ){
        // 设置没有数据提示
        $('#tips').html('没有找到更多萌宠!');
        $('#tips').show();
        return;
    }// if();

    // 循环构造单元格数据，并进行填充
    for( let i = 0; i < productList.length; i++ ) {

        let product = productList[i];

        let aId = '<a href="product_content.html?id=' + product.id + '&cid=' + product.categoryId + '">';

        // 商品主图片
        let mainImage = '<img width="200px" height="200px" class="am-thumbnail am-radius am-margin-bottom-0" src="' + IMAGE_URL_CONST.PRODUCT + product.mainImage + '" />';

        // 商品名称
        let productName = product.name;

        // 如果存在查询关键字
        if( keyword ) {
            // 就将‘商品名称’与关键字匹配的部分，高亮显示
            let keyIndex = productName.indexOf(keyword);
            productName = productName.replace(keyword, '<strong class="am-text-danger">' + keyword + "</strong>");
        }

        // 商品名称
        let name = '<p class="am-kai am-text-lg am-text-left am-text-truncate am-margin-0"><i style="font-weight: bold;">' + productName + '</i></p>';

        // id封装
        aId += mainImage + name + '</a>';

        // 商品分类
        let category = '<div class="am-cf"><ul class="am-avg-sm-2 am-text-sm"><li><i>' + getCategoryName(product.categoryId) + '</i></li>';

        // 商品价格
        let liPrice = '<li><strong class="am-text-warning">' + priceCurrencyFormat(product.price) + '</strong></li>';

        // 分类封装
        category += liPrice + '</ul></div>';

        // 将构造好的单元格数据，填充到表格中
        $('#ulProductList').append('<li>' + aId + category + '</li>');

    }// for();

}// fillProductList();

/** 根据商品分类id，获取分类名称 **/
function getCategoryName( cid ) {

    let categoryName = '';

    for( let i = 0; i < categoryList.length; i++ ) {

        let category = categoryList[i];

        if( category.id == cid ) {
            categoryName = category.name;
            break;
        }

    }// for();

    return categoryName;

}// getChildrenCategoryIds( parentCategoryId );

/**	加载'商品分类'列表数据 **/
function loadCategoryList() {

    // 加载'商品分类'数据
    $.ajax({
        type: 'POST',
        url: 'http://localhost:8080/category/getAll',
        async: false,
        success: function (result) {

            // 如果返回的数据的响应码不是'成功(200)'
            if (result.code != 200) {
                Modal.alert(result.msg);
                return;
            }

            // 如果返回的数据响应码为200
            // 就进行表格数据填充
            categoryList = result.data;

            // 如果存在查询关键字
            if( keyword ) {
                // 填充分类导航为关键字信息
                let liKeyword = '<li><a href="javascript:void(0)">搜索 "' + keyword + '" 结果列表</a></li>';
                $('#olCategoryPath').append(liKeyword);

            } else {
                // 填充分类id列表
                fillCategoryIds();
                // 填充顶部分类路径
                fillNavCategoryPath();
            }


        }// success()

    });// $.post();

}// loadCategoryList();

/** 填充分类id列表 **/
function fillCategoryIds( ) {

    // 如果不是顶级分类（父分类id不为0）
    if( parentCategoryId != 0 ) {
        // 就直接设置当前子分类id为查询参数即可
        queryObject.categoryIds = categoryId;
        return;
    }

    // 如果当前父分类id为0（顶级分类）
    let categoryIds = '';

    // 循环进行填充
    for( let i = 0; i < categoryList.length; i++ ) {

        let category = categoryList[i];

        // 如果当前分类的父id，不等于0，就跳过本次循环
        if( category.parentId == categoryId ) {
            categoryIds += category.id + ',';
        }

    }// for();

    // 去除最后1个','逗号
    categoryIds = categoryIds.substring(0, categoryIds.length - 1);
    queryObject.categoryIds = categoryIds;

}// fillCategoryIds();

/** 填充顶部分类路径 **/
function fillNavCategoryPath( ) {

    // 父分类名称
    let parentCategoryName;

    // 子分类名称
    let childCategoryName;

    // 循环查找父分类id
    for( let i = 0; i < categoryList.length; i++ ) {

        let category = categoryList[i];

        // 如果当前分类的id，等于传入的父分类id
        if( category.id == parentCategoryId ){
            // 设置父分类名称
            parentCategoryName = category.name;
            continue;
        }

        // 如果当前分类的id，等于传入的分类id
        if( category.id == categoryId ){
            // 设置父分类名称
            childCategoryName = category.name;
            continue;
        }

    }// for();

    // 如果父分类id不等于0(不是顶级分类)
    if( parentCategoryId != 0 ) {
        // 就进行父分类填充
        let parentLi = '<li><a href="product_picture_list.html?cid=' + parentCategoryId
                        + '&pcid=0">' + parentCategoryName + '</a></li>';
        $('#olCategoryPath').append(parentLi);
    }

    // 子分类
    let childLi = '<li><a href="product_picture_list.html?cid=' + categoryId
                  + '&pcid= ' + parentCategoryId + '">' + childCategoryName + '</a></li>';
    $('#olCategoryPath').append(childLi);

}// fillNavCategoryPath();

/** ‘内容列表’滚动事件 **/
let shopContentScroll = function () {

    // 获取当前元素内，滚动条得滚动高度
    let domScrollTop = $(this).scrollTop();

    // 获取展示内容的总高度
    let contentHeight = $('.shop-content-body').height();

    //console.log('st:' + domScrollTop + '\nwh:' + windowHeight() + '\ndh:' + contentHeight );

    // 判断滚动条（区域）是否滚动到底部
    if( domScrollTop + windowHeight() >= (contentHeight - 50) ) {
        // 如果滚动到底部，就解除‘滚动事件’绑定
        $('.shop-content').unbind('scroll');

        // 判断当前加载的页是否是最后一页
        if( pageResult.isLastPage ) {
            // 如果是最后一页的话，就不再加载新的数据了
            $('#tips').text('~>_<~ 已经到最底了')
            $('#tips').show();
            return;
        }// if( pageResult.isLastPage );


        // 如果还有更多的数据可以加载，就执行加载方法

        // 显示加载提示Tips
        $('#tips').text('-OvO-加载中，更多萌宠正在赶来...')
        $('#tips').show();

        // 加载更多商品数据
        loadProductList();

    }// if( domScrollTop + windowHeight() >= (contentHeight - 50) );
};

/** 获取页面浏览器的视窗（窗口）高度 **/
function windowHeight() {
    return (document.compatMode == "CSS1Compat") ?
        document.documentElement.clientHeight : document.body.clientHeight;
}
</script>
</html>